import React, { useState, useEffect, forwardRef } from 'react';
import { Radio } from 'antd';
import iconMap from '../../constant';
import './cate.less';

interface iconPickerProps {
  onChange: Function;
  value: string;
}

const StandoutView: React.FC<iconPickerProps> = forwardRef((props, ref) => {
  const { onChange, value: formValue } = props;
  const [value, setValue] = useState(formValue);
  const iconList = Object.keys(iconMap);

  useEffect(() => {
    onChange && onChange(value);
  }, [value]);

  const handleClick = (e: any) => {
    if (!value) return;
    if (value === e.target.value) {
      setValue(undefined);
    }
  };

  const handleChange = (e: any) => {
    setValue(e.target.value);
  };

  return (
    <div className="icon-picker-new-setting">
      <Radio.Group value={value} onChange={handleChange} buttonStyle="solid">
        {iconList.map((icon) => (
          <Radio.Button value={icon} onClick={handleClick}>
            <img src={iconMap[icon]} />
          </Radio.Button>
        ))}
      </Radio.Group>
    </div>
  );
});

export default StandoutView;
